<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">

    </a-divider>
    <a-descriptions title="基本反馈信息" :column="2">
      <a-descriptions-item label="用户名称">
        {{ form.memberName }}
      </a-descriptions-item>
      <a-descriptions-item label="活动名称">
        {{ form.activityName }}
      </a-descriptions-item>
      <a-descriptions-item label="反馈内容">
        {{ form.feedbackContent }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider>反馈图片</a-divider>
    <a-empty v-if="form.feedbackImgUrl === null || form.feedbackImgUrl === ''" />
    <a-list :loading="listLoading" :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="formatImg()">
      <a-list-item slot="renderItem" slot-scope="item">
        <img style="width:100%;" :src="item" alt="">
      </a-list-item>
    </a-list>

    <a-divider>反馈视频</a-divider>
    <a-empty v-if="form.feedbackVideoUrl === null || form.feedbackVideoUrl === ''" />
    <div class="player" v-if="form.feedbackVideoUrl !== null && form.feedbackVideoUrl !== ''">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        style="object-fit:fill"
        :options="playerOptions"
        :x5-video-player-fullscreen="true"
        @pause="onPlayerPause($event)"
        @play="onPlayerPlay($event)"
        @fullscreenchange="onFullscreenChange($event)"
        @click="fullScreen"
      >
      </video-player>
      <span style="font-size: small"><a-icon type="question-circle" /> 若遇到视频无法播放,点击<a @click="retryProcessVideo">这里</a>重新处理视频即可,可能会超时请多等待一会</span>
    </div>
  </a-drawer>
</template>

<script>
import { getFeedback, addFeedback, updateFeedback, processorVideo } from '@/api/angel/feedback'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'CreateForm',
  props: {
  },
  components: {
    videoPlayer
  },
  data () {
    return {
      // 视频处理
      pictureImg: '',
      playerOptions: {
//        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'application/x-mpegURL',
          src: ''
        }],
        poster: '',
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          // timeDivider: true,
          // durationDisplay: true,
          // remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      listLoading: false,
      loading: false,
      formTitle: '',
      feedbackContentEditor: '',
      // 表单参数
      form: {
        feedbackId: null,
        feedbackContent: null,
        feedbackImgUrl: null,
        feedbackVideoUrl: null,
        memberId: null,
        activityId: null,
        memberName: null,
        activityName: null
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    fullScreen () {
      const player = this.$refs.videoPlayer.player
      player.requestFullscreen()
      player.isFullscreen(true)
      player.play()
    },
    onPlayerPlay (player) {
      player.play()
    },
    onPlayerPause (player) {
      // alert("pause");
    },
    formatImg () {
      const urls = this.form.feedbackImgUrl
      if (urls === null) {
        return []
      }
      return urls.split(',')
    },
    // openEditor () {
    //   this.$nextTick(() => {
    //     this.feedbackContentEditor = new Vditor('feedbackContent', {
    //       height: 360,
    //       toolbarConfig: {
    //         pin: true
    //       },
    //       cache: {
    //         enable: false
    //       },
    //       after: () => {
    //         let content = this.form.feedbackContent
    //         if (content === undefined || content === null) {
    //           content = ''
    //         }
    //         this.feedbackContentEditor.setValue(content)
    //       }
    //     })
    //   })
    // },
    // closeEditor () {
      // this.noticeContentEditor.destroy()
    // },
    onClose () {
      this.open = false
      // this.closeEditor()
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
      // this.closeEditor()
    },
    // 表单重置
    reset () {
      this.formType = 1
      this.form = {
        feedbackId: null,
        feedbackContent: null,
        feedbackImgUrl: null,
        feedbackVideoUrl: null,
        memberId: null,
        activityId: null
      }
    },
    /** 新增按钮操作 */
    handleAdd (row) {
      this.reset()
      this.formType = 1
      this.open = true
      // this.openEditor()
      this.formTitle = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      this.formType = 2
      const feedbackId = row ? row.feedbackId : ids
      getFeedback(feedbackId).then(response => {
        this.form = response.data
        const videoUrl = response.data.feedbackVideoUrl
        if (this.confirmEnding(videoUrl, '.m3u8')) {
          this.playerOptions['sources'][0]['type'] = 'application/x-mpegURL'
        } else {
          this.playerOptions['sources'][0]['type'] = 'video/mp4'
        }
        // this.playerOptions['sources'][0]['src'] = 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'
        this.playerOptions['sources'][0]['src'] = 'http://localhost:8080' + response.data.feedbackVideoUrl
        // this.playerOptions['sources'][0]['src'] = response.data.feedbackVideoUrl
        this.open = true
        this.formTitle = '修改'
        // this.openEditor()
      })
    },
    confirmEnding (str, target) {
      const start = str.length - target.length
      const arr = str.substr(start, target.length)
      return arr === target
    },
    confirmStarting (str, target) {
      return str.match(new RegExp('^' + target + '.*$')) !== null
    },
    retryProcessVideo () {
      const videoUrl = this.form.feedbackVideoUrl
      if (!this.confirmStarting(videoUrl, '/profile/')) {
        this.$message.error(
          '仅支持本地进行视频格式转换',
          3
        )
        return false
      }
      if (this.confirmEnding(videoUrl, '.m3u8')) {
        this.$message.success(
          '已经处理为m3u8格式,不需要重复处理',
          3
        )
        return false
      }
      const feedbackId = this.form.feedbackId
      console.log(feedbackId)
      processorVideo(feedbackId).then(response => {
        if (response.code === 200) {
          this.open = false
          this.$message.success(
            '处理完成,请重新打开',
            3
          )
          this.$emit('ok')
        } else {
          this.$message.success(
            '处理异常,请重试',
            3
          )
        }
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.form.feedbackContent = this.feedbackContentEditor.getValue()
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.feedbackId !== undefined && this.form.feedbackId !== null) {
            updateFeedback(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.closeEditor()
              this.$emit('ok')
            })
          } else {
            addFeedback(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.closeEditor()
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .video-js .vjs-big-play-button {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    z-index: 100;
    background-color: #ffffff;
    border: solid 1px #979797;
  }
</style>
